<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-01 17:06:02
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-01 21:35:40
 * @FilePath: \guanggu_traffic\src\views\admin\components\UserInfoDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	 <!-- 编辑弹窗 -->
     <el-dialog
        draggable
        title="用户信息"
        v-model="dialogVisible"
        width="300"
        append-to-body
        :close-on-click-modal="false"
    >
        <el-form :model="form" label-width="80px">
            <!-- 用户名 :编辑模式下不可修改/新增模式下必填 -->
            <el-form-item label="用户名">
                <el-input v-model="form.username" :disabled="isEdit"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item label="密码">
                <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="form.type" placeholder="请选择用户类型">
                    <el-option label="普通用户" value="common"></el-option>
                    <el-option label="交通管理员" value="traffic"></el-option>
                    <el-option label="超级管理员" value="admin"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="handleSubmit(form)">确定</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import {computed,watch,ref} from 'vue'
const emit = defineEmits('update:modelValue')
const props = defineProps({
    isEdit:Boolean,//是否编辑
    modelValue:Boolean,//弹窗显示状态
    handleSubmit:Function,//提交信息
    userInfo:{
        type:Object,
        default:()=>({
            username:"",
            password:"",
            type:"common"
        })
    }
})
//定义表单数据
let form = ref({})
//监视userInfo数据,同步到form
watch(()=>{
    return props.userInfo
},(value)=>{
    form.value = value;
})
//控制用户信息弹窗是否显示
const dialogVisible = computed({
    get:()=>{
        return props.modelValue
    },
    set:(value)=>{
        emit('update:modelValue',value)
    }
})
</script>

<style lang="scss" scoped></style>
